<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div class="top-box">
          <img style="width: 30px;margin-left: 2%;" src="../assets/imgs/logo.png" />
          <div style="display: flex; justify-content: center; width: 200px;"><el-button>退出登录</el-button></div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="160px">
          <el-row>
            <el-col :span="24">
              <div style="background-color:#545c64;height: 94vh;overflow: hidden;">
                <el-menu style="width: 101%;" router active-text-color="#ffd04b" background-color="#545c64"
                         class="el-menu-vertical-demo" default-active="2" text-color="#fff">
                  <el-menu-item index="/index">口罩检测</el-menu-item>
                  <el-menu-item index="/device">设备管理</el-menu-item>
                </el-menu>
              </div>
            </el-col>
          </el-row>
        </el-aside>
        <el-main style="padding: 10px;"><router-view></router-view></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "menu"
}
</script>

<style scoped>
.common-layout {
  height: 100vh;
  overflow: hidden;
}

.el-header {
  padding: 0;
  margin: 0;
  height: 6vh;
}

.top-box {
  background-color:rgb(77, 114, 121);
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.top-box img {
  /* logo css  */
  width: 10%;
}

.avatar-box img {
  width: 35px;
  height: 35px;
  border-radius: 5px;
  margin-right: 15px;
}

.el-container {
  padding: 0;
  margin: 0;
  height: 94vh;
  /* height: 50px !important; */
  /* box-shadow: 0 1px 4px rgba(247, 2, 2, 0.08); */
  /* display: flex; */
  /* align-items: center; */
  /* justify-content: space-between; */
}
</style>